Highcharts Client-Side Export Module

Highcharts Client-Side Export Module

HighCharts has a module to export generated charts to a file but it relies on an external server for rasterization and file download. This module, while using that one, uses HTML5 features and other JavaScript libraries to make it work without setting up an export server.

Download GitHub Project

Current version: 1.1.4
Example

Use the default menu provided by HighCharts.

Or the programmatically defined buttons below:


You can toy with this example in this jsFiddle:
jsFiddle

By using a combination of official export module, canvas-tools module (or canvg) and jsPDF, allow your users to export your charts client-side in SVG, PNG, JPEG or PDF, without privacy concerns.

It also supports pseudo-official export-csv to export raw data in CSV and XLS. All under a unified API. Check the dependency tree below for more information.


Dependency tree

Dependency tree

The dependency tree has been generated with HighCharts, and thus, is exportable!

Learn more on how to draw custom shapes with HighCharts renderer here.

Support

With this configuration (all dependencies) and on this platform, those formats have been detected to be supported:

  • SVG
  • PNG
  • JPEG
  • PDF
  • CSV
  • XLS

Installation

To install it, you need to do the following:

  1. Download it:
  2. Add it to your project: <script src="./lib/highcharts-export-clientside/highcharts-export-clientside.js"></script> along-side the dependencies you need (see dependency tree above for more information).

    Something along those lines: 
    <!-- HighCharts -->
<script src="./lib/highcharts/highcharts.js"></script>

<!-- Other dependencies -->
<script src="./lib/highcharts/modules/exporting.js"></script>
<script src="./lib/highcharts/modules/canvas-tools.js"></script>
<script src="./lib/export-csv/export-csv.js"></script>
<script src="./lib/jspdf/dist/jspdf.min.js"></script>

<!-- This module, after the dependencies -->
<script src="./lib/highcharts-export-clientside/highcharts-export-clientside.js"></script>
  3. There are no step 3!

Usage

If you just want to use the menu provided by HighCharts, you have nothing to do! Just include this module after the dependencies you need but before your chart definitions.

If you need to access the feature programmatically, the module adds a method exportChartLocal(options, chartOptions) to the HighCharts.Chart prototype. It attempts to mimic as closely as possible exportChart(options, chartOptions) provided by the official exporting module.

Quick snippet below:

$("#my-highcharts-container")
  .highcharts()                                 // Fetches the Chart instance associated with this container.
  .exportChartLocal({                           // All attributes are optionals (defaut type is "image/png").
    type: Highcharts.exporting.MIME_TYPES.JPEG     // For your convenience, MIME_TYPES are stored in an object.
  });

You may want to know if the current platform supports said export type. To do so, a function called supports(mimeType) exists. 

if(Highcharts.exporting.supports(Highcharts.exporting.MIME_TYPES.XLS)) {
  // Excel file format is supported!
}

That's all!

Reference

Hereunder, a list of defined objects and methods by this module.

In HighCharts.Chart.prototype:

exportChartLocal(options, chartOptions)
Function to download the chart. It's set to mimic chart.exportChart.
options (optional), an object containing export options. They overload those defined at chart definition. Supported attributes and default values are as follow: 
{
  filename: "chart",
  chartOptions: {},
  sourceWidth: <chart.width>,
  sourceHeight: <chart.height>,
  scale: 2,
  type: MIME_TYPES.PNG
  csv: {
    useBOM: MIME_TYPES.XLS,
    useLocalDecimalPoint: true,
    dateFormat: "%Y-%m-%d %H:%M:%S",
    itemDelimiter: ",",
    lineDelimiter: "\n",
  }
}

Attributes should follow official ones:
  • filename: All Formats String, defaults to "chart". Desired filename without the extension.
    Unoffical 1.1.1 Can also be a function. It will take two parameters, options and chartOptions and will be binded to the current chart instance. It will have to return a string, which will be the filename without its extension.
    For your convenience, a constant Highcharts.exporting.USE_TITLE_FOR_FILENAME has been defined and that returns and lowercase variation of the chart title.
  • chartOptions: SVG, PNG, JPEG, PDF Object, defaults to undefined. Default chart options, see chartOptions parameter.
  • sourceWidth, sourceHeight: SVG, PNG, JPEG, PDF Integers, default to undefined. If not defined, takes the current width/height. Width / Height of exported before scale is applied. Superseeded by chart.width and chart.height if explicitly defined. The unit is pixels except for PDF where it is millimeters.
  • scale: SVG, PNG, JPEG, PDF Integer, defaults to 2. Multiplying factor to the dimension of the exported image.
  • type All Formats String, defaults to "image/png". MIME type of the desired export format. See MIME_TYPES.*.
  • csv.useBOM: CSV, XLS Unoffical 1.1.4 Boolean or String, defaults to MIME_TYPES.XLS. If true or of the MIME type of the current export format, it will prepend the UTF-8 BOM. This is unofficial and not compliant with export-csv module but has been known to cause issues on accentuated when opening file in Microsoft Excel.
  • csv.useLocalDecimalPoint: CSV, XLS Unoffical Boolean, defaults to true. If true, exported files use the current browser decimal separator. Else uses . (dot).
  • csv.dateFormat: CSV String, defaults to %Y-%m-%d %H:%M:%S. Format for the dates. A format understood by Highcharts.dateFormat([…]).
  • csv.itemDelimiter: CSV String, defaults to ,. Character used to separate fields.
  • csv.lineDelimiter: CSV String, defaults to \n. Character used as new line.
chartOptions (optional) is an object that will be passed through chart.getSVG(chartOptions). It is used to overload rendering options prior to SVG generation. For instance, setting a different background, changing legend position, etc.
Return value is undefined but an error might be thrown if the provided type is not supported or an error occured during the export.
exportChart(options, chartOptions)
Alias to exportChartLocal(options, chartOptions) for legacy code use.

In HighCharts.exporting:

MIME_TYPES
An object containing the MIME types of exportable formats.
Extensive key-value pairs are as follow:
  • SVG: image/svg+xml
  • PNG: image/png
  • JPEG: image/jpeg
  • PDF: application/pdf
  • CSV: text/csv
  • XLS: application/vnd.ms-excel
USE_TITLE_FOR_FILENAME
An helper function to set to the exporting.filename configuration option that return a lowercase variation of the chart title. Spaces are replaced by underscores.
supports(mimeType)
A function indicating if the supplied MIME type is supported on the current configuration. Supported types are computed at evaluation time, meaning that if you include a dependency dynamically or after this module, this will not return a correct value.
mimeType is expected to be a string. For available values, see MIME_TYPES.
Returns a boolean, true if the provided MIME type is supported.

Compatibility

Read carefully as compatibility isn't assured on every browser.

This module has been tested under Google Chrome, Opera (webkit-based), Mozilla Firefox. and Internet Explorer 10-11.

IE10+ doesn't have JPEG support as it relies on msToBlob.

IE 9 and below are not supported at this stage.

License & Credits

This module is releasing under the Unlicense license. A copy of which can be found here.

Written with the help of the following resources: